<template>
  <div id="srgk">
    <center><h2>收支概况</h2></center>

    <div id="newCharts"></div>
  </div>
</template>

<script>
  import { getlumpSumExpenses } from '../../api/incomeAndExpenses/statistics'

  import { gettotalRefund } from '../../api/incomeAndExpenses/statistics'

  export default {
    data() {
      return {}
    },
    mounted() {
      var sf = 0
      var tf = 0

      getlumpSumExpenses().then((rep) => {
        sf = rep.data

        gettotalRefund().then((rep) => {
          tf = rep.data

          this.showCharts1(sf, tf)
        })
      })
    },
    methods: {
      // 展示折线图
      showCharts1(sf, tf) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('newCharts')) //也可以通过$refs.newCharts的方式去获取到dom实例。
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'item',
          },
          legend: {
            top: '5%',
            // left: 'center'
          },
          series: [
            {
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 15,
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              data: [
                { value: sf, name: '收入金额' },
                { value: tf, name: '退费金额' },
              ],
            },
          ],
        })
      },
    },
  }
</script>

<style scoped>
  #newCharts {
    /*  display: inline-block; */

    margin-left: 45px;

    width: 400px;
    height: 280px;
  }

  #srgk {
    margin-top: 0px;

    /* display: inline-block; */
  }
</style>
